// 实现标签页的切换
function initSwitchTab() {
    //1.先获取相关的元素（标签页按钮，会话列表，好友列表）
    let tabSession = document.querySelector('.tab .tab-session');
    let tabFriend = document.querySelector('.tab .tab-friend');
    //document.querySelectorAll，选中两个list列表，以数组形式返回
    //[0],会话1，[1]，会话2
    let lists = document.querySelectorAll('.list');
    //2.针对标签页按钮进行点击事件
    //      1.如果点击会话按钮，则对会话背景图片进行设置
    //      同时，把会话列表显示，好友列表隐藏
    //      2.如果点击好友按钮，反之即可
    tabSession.onclick = function() {
        //1.设置图标
        tabSession.style.backgroundImage = 'url(img/会话2.png)';
        tabFriend.style.backgroundImage = 'url(img/通讯录1.png)';
        //2.点击会话显示会话，隐藏好友
        lists[0].classList = 'list';
        lists[1].classList = 'list hide';
    }
    tabFriend.onclick = function() {
        //1.设置图标
        tabSession.style.backgroundImage = 'url(img/会话1.png)';
        tabFriend.style.backgroundImage = 'url(img/通讯录2.png)';
        //2.点击会话显示会话，隐藏好友
        lists[0].classList = 'list hide';
        lists[1].classList = 'list';
    }
}

initSwitchTab();
// 实现消息发送/接收逻辑
function initSendButton() {
    //1.获取发送按钮 和消息输入框
    let sendButton = document.querySelector('.right .ctrl button');
    let messageInput = document.querySelector('.right .message-input');
    //2.给发送按钮设定一个点击事件
    sendButton.onclick = function() {
        //1.判断输入框是否为空，为空，不做响应
        if(!messageInput.value) {
            return;
        }
        //2.不为空，找到被选中的selected用户，获取用户id
        let selectedLi = document.querySelector('#session-list .selected');
        if(selectedLi == null) {
            //当前没有li被选中
            return;
        }
        let sessionId = selectedLi.getAttribute('message-session-id');
        //3.构造json
        let req = {
            type: 'message',
            sessionId: sessionId,
            content: messageInput.value
        };
        //将req对象转为json
        req = JSON.stringify(req);
        console.log("[webSocket] send: " + req);
        //4.通过webSocket发送消息
        websocket.send(req);
        //5.发送完成后，清空输入框
        messageInput.value = '';
    }
}
initSendButton();
// 操作webSocket
// 创建webSocket实例
// let websocket = new WebSocket("ws://127.0.0.1:8080/WebSocketMessage");//本地电脑端口和ip
let websocket = new WebSocket("ws://" + location.host +"/WebSocketMessage");//通用


websocket.onopen = function() {
    console.log("webSocket 连接成功!");
}

websocket.onmessage = function(e) {
    console.log("webSocket 收到消息! " + e.data);
    //将json字符串转为js对象
    let resp = JSON.parse(e.data);
    if(resp.type == 'message') {
        //处理消息响应
        handleMessage(resp);
    }else {
        //resp的type出错
        console.log("resp.type不符合要求");
    }
}

websocket.onclose = function() {
    console.log("webSocket 连接关闭!");
}

websocket.onerror = function() {
    console.log("webSocket 连接异常!");
}
//把客户端收到的消息展示出来（主消息区 + 最后一条会话）
function handleMessage(resp) {
    //1.根据响应中的sessionId,获取会话中的li标签
    let curSessionLi = findSessionLi(resp.sessionId);
    if(curSessionLi == null) {
        curSessionLi = document.createElement('li');
        curSessionLi.setAttribute('message-session-id',resp.sessionId);
        curSessionLi.innerHTML = '<h3>'+ resp.fromName + '</h3>' + '<p></p>';
        curSessionLi.onclick = function() {
            clickSession(curSessionLi);
        }
    }
    //2.新消息展示在会话标签，如果太长要进行截断
    let p = curSessionLi.querySelector('p');
    p.innerHTML = resp.content;
    if(p.innerHTML.length > 10) {
        p.innerHTML = p.innerHTML.substring(0,10) + '...';
    }
    //3.接收到消息的会话（好友）置顶
    let sessionListUL = document.querySelector('#session-list');
    sessionListUL.insertBefore(curSessionLi,sessionListUL.children[0]);
    //4.如果会话被选中，右侧要展示和该用户的聊天窗口，并显示在最新消息
    if(curSessionLi.className == 'selected') {
        let messageShowDiv = document.querySelector('.right .message-show');
        addMessage(messageShowDiv,resp);
        scrollBottom(messageShowDiv);
    }
}
//获取所有会话li标签
function findSessionLi(targetSessionId) {
    let sessionLis = document.querySelectorAll('#session-list li');
    for(let li of sessionLis) {
        let sessionId = li.getAttribute('message-session-id');
        if(sessionId == targetSessionId) {
            return li;
        }
    }
    //新点击用户，不存在历史消息时
    return null;
}
// 从服务器获取用户名称到客户端
function getUserInfo() {
    $.ajax({
        type: 'get',
        url: '/userInfo',
        success: function(body) {
            //从服务器获取到数据检验数据是否有效
            if(body.userId != null && body.userId > 0) {
            //有效，将用户名显示在界面同时，记录userId到html标签中
                let userDiv = document.querySelector('.main .left .user');
                userDiv.innerHTML = body.username;
                userDiv.setAttribute("user-id",body.userId);
            }else {
                //无效，返回到登录页面
                alert("当前用户未登录！");
                location.assign('/login.html');
            }
        }
    });
}

getUserInfo();

// 获取好友列表
function getFriendList()  {
    $.ajax({
        type: 'get',
        url: '/friendList',
        success: function(body) {
            //1.先将之前的好友列表清空
            let friendListUL = document.querySelector('#friend-list');
            friendListUL.innerHTML = '';
            //2.遍历body,将结果加到好友列表中
            for (let friend of body) {
                //添加好友列表格式
                let li = document.createElement('li');
                li.innerHTML = '<h4>' + friend.friendName + '</h4>';
                //记录friendId
                li.setAttribute('friend-id',friend.friendId);
                //添加好友列表
                friendListUL.appendChild(li);

                //每个li标签对应了一个好友选项，所以加上点击效果
                li.onclick = function() {
                    clickFriend(friend);
                }
            }
        },
        error: function()  {
            alert('获取好友列表失败！');
        }
    });
}

getFriendList();

// 获取会话列表
function getSessionList() {
    $.ajax({
        type: 'get',
        url: '/sessionList',
        success: function(body) {
            //1.清空消息列表
            let sessionListUL = document.querySelector('#session-list');
            sessionListUL.innerHTML = '';
            //2.遍历响应数组，针对结果构造页面
            for (let session of body) {
                //针对长度可能过长问题，进行截断
                if(session.lastMessage.length > 10) {
                    session.lastMessage = session.lastMessage.subString(0,10) + '...';
                }
                let li = document.createElement('li');
                //把会话id保存到li自定义标签中
                li.setAttribute('message-session-id',session.sessionId);
                // li.innerHTML = '<h3>' + session.friend[0].friendName + '</h3>'+
                //                '<p>' + session.lastMessage + '</p>';
                li.innerHTML = '<h3>' + session.friends[0].friendName + '</h3>' 
                    + '<p>' + session.lastMessage + '</p>';
                sessionListUL.appendChild(li);

                //点击人历史信息高亮设置
                li.onclick = function() {
                    clickSession(li);
                }
            }
        }
    });
}

getSessionList();

//点击人历史信息高亮方法
function clickSession(currentLi) {
    //1.设置高亮
    let allLis = document.querySelectorAll('#session-list>li');
    activeSession(allLis,currentLi);
    //2.获取历史信息
    let sessionId = currentLi.getAttribute("message-session-id");
    getHistoryMessage(sessionId);
}

//高亮实现
function activeSession(allLis,currentLi) {
    for (let li of allLis) {
        if(li == currentLi) {
            li.className = 'selected';
        }else {
            li.className = '';
        }
    }
}
//获取历史信息
function getHistoryMessage(sessionId) {
    console.log("获取历史消息 sessionId= " + sessionId);
    //1.清空右侧已经知所有内容
    let titleDiv = document.querySelector('.right .title');
    titleDiv.innerHTML = '';
    let messageShowDiv = document.querySelector('.right .message-show');
    messageShowDiv.innerHTML = '';
    //2.重新设置标题，点击那个会话，标题就显示那个会话，通过selected这个类
    let selectedH3 = document.querySelector('#session-list .selected>h3');
    if(selectedH3) {
        titleDiv.innerHTML = selectedH3.innerHTML;
    }
    //3.发送ajax请求给服务器，获取会话的历史信息
    $.ajax({
        type: 'get',
        url: 'message?sessionId=' + sessionId,
        success: function(body) {
            for(let message of body) {
                //此时body是js数组，直接遍历
                addMessage(messageShowDiv,message);
            }
            //自动滚动到最新消息
            scrollBottom(messageShowDiv);
        }
    });
}
//将历史消息，加入到对应的位置
function addMessage(messageShowDiv,message) {
    //使用div表示一条消息
    let messageDiv = document.createElement('div');
    //判断发送消息的用户是自己还是好友，从而判断消息靠左靠右
    let selfUsername = document.querySelector('.left .user').innerHTML;
    if(selfUsername == message.fromName) {
        //自己发的靠右
        messageDiv.className = 'message message-right';
    } else {
        //好友发的靠左
        messageDiv.className = 'message message-left';
    }
    messageDiv.innerHTML = '<div class="box">' + '<h4>' + message.fromName + '</h4>' 
                            + '<p>' + message.content + '</p>' + '</div>';
    messageShowDiv.appendChild(messageDiv);
}
//自动滚动函数实现
function scrollBottom(elem) {
    //1.获得可视区域高度
    let clientHeight = elem.offsetHeight;
    //2.获取到内容高度
    let scrollHeight = elem.scrollHeight;
    //3.进行滚动操作，第一个参数是水平高度，第二个参数是垂直方向滚动的尺寸
    elem.scrollTo(0,scrollHeight - clientHeight);
}
//点击好友列表触发的函数
function clickFriend(friend) {
    //1.判定该好友是否有相应的会话
    //使用一个单独函数来遍历，如果用户名查找到了证明存在，返回一个li,如果不存在则返回一个null
    let sessionLi = findSessionByName(friend.friendName);
    let sessionListUL = document.querySelector('#session-list');
    if(sessionLi) {
    //2.如果有，则切换标签页到该会话，高亮并置顶
    //insertBefore->置顶效果
        sessionListUL.insertBefore(sessionLi,sessionListUL.children[0]);
        // clickSession(sessionLi);
        sessionLi.click();
    }else {
    //3.如果没有，则创建新会话通知服务器，切换标签页，高亮并置顶
        sessionLi = document.createElement('li');
        //构造li标签内容，新会话没有历史聊天信息，所以p标签为空
        sessionLi.innerHTML = '<h3>' + friend.friendName + '</h3>' + '<p></p>';
        //标签置顶
        sessionListUL.insertBefore(sessionLi,sessionListUL.children[0]);
        sessionLi.onclick = function() {
            clickSession(sessionLi);
        }
        sessionLi.click();
        //发送消息给服务器
        createSession(friend.friendId,sessionLi);
    }
    //切换标签页
    let tabSession = document.querySelector('.tab .tab-session');
    tabSession.click();
}
//查找用户名
function findSessionByName(username) {
    //获取会话中的所有li
    //遍历判断是否有username这个用户的li
    let sessionLis = document.querySelectorAll('#session-list>li');
    for(let sessionLi of sessionLis) {
        //获取到li后，再获取li里面的h3(h3含有用户名信息)
        let h3 = sessionLi.querySelector('h3');
        if(h3.innerHTML == username) {
            return sessionLi;
        }
    }
    return null;
}
//提交信息给服务器
function createSession(friendId,sessionLi) {
    $.ajax({
        type: 'post',
        url: 'session?toUserId=' + friendId,
        success: function(body) {
            console.log("会话创建成功！ sessionId = " + body.sessionId);
            sessionLi.setAttribute('message-session-id',body.sessionId);
        },
        error: function() {
            console.log("会话创建失败！");
        }
    });
}